<template>
  <div class="playList" ref="playList">
    <div class="topHead">
      <div class="topBgImg topBgUrl"
           ref="topBgUrl" :style="bgUrl"></div>
      <div class="back" @click="goBack()">
        <img src="./backed.png" alt="" width="100%">
      </div>
      <div class="title titleName">
        <div class="TextScroll" ref="textScrollWidth">
          <p v-show="show">{{titleName}}</p>
          <text-scroll :dataList="dataList" :show="show" ref="textScroll"></text-scroll>
        </div>
        <div class="copywriter">{{copywriter}}</div>
      </div>
      <div class="search">
        <img src="./search.png" alt="" width="100%">
      </div>
    </div>
    <scroll :data="tracks" :listen-scroll="listenScroll" :probe-type="probeType" class="recommend-content" ref="scroll"
            @scroll="scroll">
      <div ref="list">
        <div class="head" ref="head">
          <transition name="fade">
            <div class="topBgImg" :style="bgUrl" ref="bgImg"></div>
          </transition>
          <div class="title">
            <img :src="picUrl" alt="" height="100%" class="fl">
            <div>
              <div class="name">
                {{name}}
              </div>
              <div>
                <img class="avatarUrl" src="./ava.png" width="30rem" v-show="!creator.avatarUrl">
                <img class="avatarUrl" :src="creator.avatarUrl" width="30rem" v-show="creator.avatarUrl">
                <span class="nickname">{{creator.nickname}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="songList" v-show="tracks.length">
          <div class="playAll" @click="playAll()">
            <div class="play">
              <img src="./play1.png" alt="">
            </div>
            播放全部(共{{tracks.length}}首)
          </div>
          <ul>
            <li v-for="item, index in tracks" :key="item.id" class="item-list" @click="selectItem(item, index)">
              <div>
                <div class="item-left">
                  <img :src="voice" alt="" v-show="currentSong.id === item.id">
                  <span v-show="currentSong.id !== item.id">{{index+1}}</span>
                </div>
                <dl>
                  <dt>
                    <span>{{item.name}}</span>
                  </dt>
                  <dd>
                    <span v-for="singer, index in item.ar"><span v-if="index>0">/</span>{{singer.name}}</span>-<span>{{item.al.name}}</span>
                  </dd>
                </dl>
              </div>
              <span class="hr"></span>
            </li>
          </ul>
        </div>
        <loading v-show="!tracks.length" class="load"></loading>
      </div>
    </scroll>
    <p class="setWidth" ref="setWidth">{{listName}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from '../../base/scroll/scroll.vue'
  import TextScroll from '../../base/text-scroll/text-scroll.vue'
  import Loading from '../../base/loading/loading.vue'
  import {mapActions, mapGetters} from 'vuex'
  import {playlistMixin} from '../../common/js/mixin/playList'
  const SPEED = 0.08
  const TITLENAME = '歌单'
  export default{
    mixins: [playlistMixin],
    data() {
      return {
        scrollY: 0,
        titleName: TITLENAME,
        slideWidth: 0,
        dataList: [],
        show: true
      }
    },
    created() {
      this.probeType = 3
      this.listenScroll = true
      this.voice = require('./voice.png')
    },
    props: {
      tracks: Array,
      copywriter: '',
      name: '',
      picUrl: '',
      creator: {},
      listName: ''
    },
    deactivated() {
      this.$refs.list.style.transform = `translate3d(0 ,0 ,0)`
      this.titleName = TITLENAME
      this.show = true
    },
    methods: {
      scroll(pos) {
        this.scrollY = pos.y
      },
      goBack() {
        this.$router.go(-1)
      },
      selectItem(item, index) {
        let fullScreen = false
        let playing = true
        if (this.currentSong.id === item.id) {
          fullScreen = true
          playing = this.playing
        } else if (!this.currentSong.id) {
          fullScreen = true
        }
        this.selectPlay({
          list: this.tracks,
          index,
          fullScreen,
          playing
        })
      },
      hasPlayList(playingList) {
        const bottom = playingList.length > 0 ? '4.5rem' : ''
        this.$refs.playList.style.bottom = bottom
        this.$refs.scroll.refresh()
      },
      playAll() {
        this.playAllList({
          list: this.tracks
        })
      },
      ...mapActions([
        'selectPlay',
        'playAllList'
      ])
    },
    computed: {
      bgUrl() {
        return `background-image:url(${this.picUrl})`
      },
      ...mapGetters([
        'currentSong',
        'playing'
      ])
    },
    watch: {
      scrollY(newVal) {
        let opacity = Math.abs(newVal / (this.headHeight - this.topBgUrlHeight))
        if (opacity >= 1) {
          opacity = 1
        }
        if (newVal >= 0) {
          this.$refs.list.style.transform = `translate3d(0 ,0 ,0)`
        }
        if (newVal < 0) {
          if (-newVal >= this.topBgUrlHeight) {
            this.titleName = this.listName
            let width = this.$refs.setWidth.clientWidth
            this.$refs.textScroll.swiperOption.speed = width / SPEED
            let textScrollWidth = this.$refs.textScrollWidth.clientWidth
            width < textScrollWidth ? this.show = true : this.show = false
            if (!this.show) {
              this.dataList = [{text: this.titleName}]
              this.$refs.textScroll.swiperOption.width = width
              this.$refs.textScroll.$refs.carousel.showSwiper = true
            }
          } else {
            this.show = true
            this.$refs.textScroll.$refs.carousel.showSwiper = false
            this.titleName = TITLENAME
          }
        }
        this.$refs.topBgUrl.style.opacity = `${opacity}`
      }
    },
    mounted() {
      this.headHeight = this.$refs.head.clientHeight
      this.topBgUrlHeight = this.$refs.topBgUrl.clientHeight
    },
    components: {
      Scroll,
      TextScroll,
      Loading
    }
  }
</script>

<style>
  .playList {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background: #fff;
  }
  .playList .load{
    margin-top: 5rem;
  }
  .playList .topHead {
    position: absolute;
    z-index: 100;
    height: 4rem;
    width: 100%;
    padding-left: 1rem;
    overflow: hidden;
  }

  .topHead .title {
    position: absolute;
    left: 4rem;
    width: 60%;
    color: #fff;
  }

  .topHead .copywriter {
    font-size: 1rem;
    color: #f3eded;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .titleName{
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .titleName > span {
    overflow: hidden;
    white-space: nowrap
  }

  .playList .back, .playList .search {
    position: absolute;
    top: 1rem;
    width: 2rem;
  }

  .playList .search {
    right: 4rem;
  }

  .playList .head {
    position: relative;
    padding: 4rem 1rem 3rem 1.5rem;
    overflow: hidden;
  }

  .head .title {
    height: 12.6rem;
    position: relative;
  }

  .head .title > div {
    position: absolute;
    left: 13.6rem;
  }

  .head .title .name {
    padding: 1rem 0 2rem;
    color: #fff;
  }

  .head .title .avatarUrl {
    border-radius: 50%;
  }

  .head .title .nickname {
    color: rgba(255, 255, 255, .7);
    line-height: 30px;
  }

  .bgImg, .topBgImg {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .bgImg:after,.topBgImg:after {
    position: absolute;
    left: 0;
    right: 0;
    content: " ";
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
  }
  .topBgImg{
    transform: scale(8888);
  }

  .playAll {
    height: 5rem;
    line-height: 5rem;
    border-bottom: 1px solid rgba(204, 204, 204, .5);
  }

  .playAll img {
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
  }

  .playAll .play {
    display: inline-block;
    width: 4rem;
    text-align: center;
  }


  .playList .mu-avatar img {
    width: 50%;
    height: 50%;
  }

  .TextScroll {
    position: relative;
    height: 2rem;
  }

  .TextScroll > p {
    position: absolute;
    white-space: nowrap;
    font-size: 1.5rem;
  }

  .swiper-slide {
    white-space: nowrap;
    font-size: 1.5rem;
  }

  .TextScroll .swiper-wrapper {
    transition-timing-function: linear; /*之前是ease-out*/
    margin: 0 auto;
  }

  .setWidth {
    position: absolute;
    white-space: nowrap;
    font-size: 1.5rem;
    z-index: -100;
  }

  .recommend-content > div {
    transform: translate3d(0, 0, 0);
  }

  .item-list {
    height: 5rem;
  }

  .item-list > div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .item-list dl {
    display: inline-block;
    width: calc(100% - 4rem);
  }

  .item-list dt, .item-list dd {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .item-list dd {
    font-size: 1rem;
    color: rgba(0, 0, 0, .54);
  }

  .playList .item-left {
    display: inline-block;
    width: 4rem;
    text-align: center;
  }

  .item-left img {
    width: 2rem;
    height: 2rem;
  }

  .item-list span.hr {
    position: absolute;
    display: inline-block;
    width: calc(100% - 4rem);
    height: 1px;
    margin-left: 4rem;
    background: rgba(204, 204, 204, .5);
  }
  .fade-enter-active, .fade-leave-active{
    transition: all .15s
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
</style>
